<template>
  <div class="loginBody">
    <div class="login-logo">
      <VanImage width="9rem" height="11rem" :src="require('@/assets/backgrounds/logo.png')" class="center-image" />
    </div>
    <p class="login-title">爱宠星球</p>
    <Form @submit="onSubmit">
      <Field v-model="loginForm.username" name="用户名" label="用户名" placeholder="用户名"
             :rules="[{ required: true, message: '请输入用户名' }]" />
      <Field v-model="loginForm.password" type="password" name="密码" label="密码" placeholder="密码"
             :rules="[{ required: true, message: '请输入密码' }]" />
      <div class="agreement-container">
        <Checkbox v-model="agreeTerms" class="agreement-checkbox">
          我已阅读并同意<router-link to="/LicenseView" style="color:#FA6408">《服务条款》</router-link>
        </Checkbox>
        <a href="/SignupView" class="register-link">立即注册</a>
      </div>
      <div style="margin: 16px;">
        <Button color="#FA6408" round block type="info" native-type="submit" :disabled="!agreeTerms || confirm_disabled">登 录</Button>
      </div>
    </Form>
    <div class="third-login">其他登录方式</div>
    <div class="button-container">
      <Button class="wechat-button" round color="#E5F8E5">
        <p class="wechat-text">
          <Icon color="#35CB35" name="wechat" />
          微信登录
        </p>
      </Button>
      <Button class="qq-button" round color="#F6F6F6" @click="goToMainView">
        <p class="qq-text">
          游客登录
        </p>
      </Button>
    </div>
  </div>
</template>

<script>
import { Form, Field, Button, Image as VanImage, Checkbox, Icon, Toast } from 'vant';
import http from '@/plugins/http'
export default {
  name: "LoginView",
  components: {
    Field,
    Form,
    Button,
    VanImage,
    Checkbox,
    Icon
  },
  data() {
    return {
      confirm_disabled: false,
      loginForm: {
        username: '',
        password: '',
      },
      agreeTerms: false // 单选按钮的状态
    }
  },
  methods: {
    goToMainView()
    {
      this.$router.push('/MainView');
    },
    onSubmit() {
      let v = this;
      this.confirm_disabled = true;
      http({
        method: 'post',
        url: '/user/login',
        data: {
          'username': v.loginForm.username,
          'password': v.loginForm.password
        },
      })
          .then(res => {
            console.log(res);
            if (res.statusCode === "200") {
              sessionStorage.setItem("username", JSON.stringify(res.data.username));
              const token = res.data.token;
              sessionStorage.setItem('token', token);
              console.log('token is ' + token);
              this.$nextTick(() => {
                Toast.success({
                  message: res.message,
                  duration: 1000,
                });
                v.$router.push('/MainView');
              });
            } else {
              v.confirm_disabled = false;
              this.$nextTick(() => {
                Toast.fail({
                  message: res.message,
                  duration: 1000
                });
              });
            }
          })
          .catch(() => {
            v.confirm_disabled = false;
            this.$nextTick(() => {
              Toast.fail({
                message: '登录失败，请稍后再试',
                duration: 1000
              });
            });
          });
    }
  }
}
</script>

<style scoped>
.loginBody {
  height: 100vh;
}

.login-logo {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.center-image {
  display: block;
}

.login-title {
  text-align: center;
  padding-bottom: 20px;
  font-size: 30px;
}

.agreement-container {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  margin-left: 15px;
}

.agreement-checkbox {
  flex: 1;
}

.register-link {
  text-align: right;
  text-decoration: none;
  margin-right: 15px;
  color: #409eff;
}

.third-login {
  font-size: small;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 15px;
  color: #808080;
}

.button-container {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.qq-text {
  color: #00BAFC;
}

.wechat-text {
  color: #35CB35;
}

.wechat-button,
.qq-button {
  flex: 1;
  height: 40px;
}

.wechat-button {
  margin-right: 10px;
}

.qq-button {
  margin-left: 10px;
}
</style>
